<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">


<div class="col-md-12 col-sm-12 col-xs-12">
	<div class="x_panel">
		<div class="x_title">
			<h2>用户列表</h2>
			<ul class="nav navbar-right panel_toolbox">
				<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>

				<li><a class="close-link"><i class="fa fa-close"></i></a></li>
			</ul>
			<div class="clearfix"></div>
		</div>
		<div class="x_content">
			<p class="text-muted font-13 m-b-30"></p>
			<table id="datatable-userList"
				class="table table-striped table-bordered bulk_action">
				<thead>
					<tr>
						<th><input type="checkbox" id="check-all" class="flat"></th>
						<th>序号</th>
						<th>姓名</th>
						<th>登陆名</th>
						<th>email</th>
						<th>电话</th>
					</tr>
					<tr th:each="user,iterStat : ${userList}">
						<td><input type="checkbox" id="check-all" class="flat"></td>
						<td th:text="${iterStat.count}"></td>
						<td th:text="${user.userName}"></td>
						<td th:text="${user.loginId}"></td>
						<td th:text="${user.email}"></td>
						<td th:text="${user.phone}"></td>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</div>

<script>
	$(function() {
		init_DataTables();
	})

	function init_DataTables() {

		if (typeof ($.fn.DataTable) === 'undefined') {
			return;
		}
		var handleDataTableButtons = function() {
			if ($("#datatable-userList").length) {
				$("#datatable-userList").DataTable({
					dom : "Bfrtip",
					buttons : [ {
						extend : "copy",
						className : "btn-sm"
					}, {
						extend : "csv",
						className : "btn-sm"
					}, {
						extend : "excel",
						className : "btn-sm"
					}, {
						extend : "pdfHtml5",
						className : "btn-sm"
					}, {
						extend : "print",
						className : "btn-sm"
					}, ],
					responsive : true
				});
			}
		};

		TableManageButtons = function() {
			"use strict";
			return {
				init : function() {
					handleDataTableButtons();
				}
			};
		}();


		$('#datatable-userList').DataTable({
			//keys : true,
			fixedHeader : true
		});

		var $datatable = $('#datatable-userList');

		$datatable.dataTable({
			'order' : [ [ 1, 'asc' ] ],
			'columnDefs' : [ {
				orderable : false,
				targets : [ 0 ]
			} ]
		});
		$datatable.on('draw.dt', function() {
			$('checkbox input').iCheck({
				checkboxClass : 'icheckbox_flat-green'
			});
		});

		TableManageButtons.init();

	};
</script>